<!--
 * @author luguoxiang
 * @date 2022/9/17
 * 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <table-container>
    <lg-table :schema="schema" v-bind="tableProps">
      <!-- 工具栏 -->
      <template #toolbar-left>
        <lg-button-list :limit="$ToolBtnLimit">
          <btn-tool-add v-if="has('create')" @click="editRef.open()" />
          <btn-tool-remove v-if="has('remove')" @click="remove()" />
          <btn-tool-export v-if="has('export')" @click="exports" />
          <btn-tool-import v-if="has('import')" @click="imports" />
          <template #trigger><btn-tool-more /></template>
        </lg-button-list>
      </template>
      <!-- 操作栏 -->
      <template #actionbar="{ row }">
        <lg-button-list :limit="$RowBtnLimit">
          <btn-row-view v-if="has('view')" @click="viewerRef.open({ files: [row.url], index: 0 })">查看</btn-row-view>
          <btn-row-remove v-if="has('remove')" @click="remove(row.id)" />
        </lg-button-list>
      </template>
      <!-- 插槽 -->
      <template #disabled="{ row }">
        <t-switch :value="row.disabled" @change="() => changeDisabled(row)" />
      </template>
    </lg-table>
    <edit ref="editRef" @ok="reload()" />
    <detail ref="detailRef" />
    <lg-file-viewer ref="viewerRef" />
  </table-container>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TableContainer } from '@/components';
import { useAuth, LgButtonList, LgTable, useTable } from '@/soar';
import schema from './schema';
import api from './api';
import Edit from './Edit.vue';
import Detail from './Detail.vue';
import LgFileViewer from '@/soar/components/LgFileViewer/index.vue';

const { has } = useAuth();
const editRef = ref();
const detailRef = ref();
const viewerRef = ref();

const { exports, imports, remove, reload, tableProps } = useTable<any>({
  api,
  props: {
    fields: ['id', 'directory', 'suffix'],
    orderBys: ['id'],
    actionbar: {
      width: 100,
    },
  },
});

function changeDisabled(row) {
  row.disabled = !row.disabled;
  api.update({ id: row.id, disabled: row.disabled }).catch(() => reload());
}
</script>
